<template>
    <div class="Login">
        <h1>{{ $t("msg.title") }}</h1>
        <!-- 用户名 -->
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="0px" class="demo-ruleForm">
            <el-form-item prop="username">
                <el-input v-model="ruleForm.username" type="text" autocomplete="off" :prefix-icon="Avatar"
                    placeholder="请输入用户名" size="large" />
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="password">
                <el-input v-model="ruleForm.password" type="password" autocomplete="off" :prefix-icon="Lock"
                    placeholder="请输入密码" size="large" />
            </el-form-item>
            <!-- 登录 -->
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { ElMessage, FormInstance } from 'element-plus';
import { Avatar, Lock } from '@element-plus/icons-vue';
import { user } from '../../api/index';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/store/user/index';

const userStore = useUserStore();

const router = useRouter();

const ruleFormRef = ref<FormInstance>();
//自定义的规则是一个函数,rule-规则 ,value -输入框的值 ,callback
const validatePass = (rule: any, value: string, callback: any) => {
    if (value === '') {
        // 如果不通过校验,需要callback里面传入一个错误对象
        callback(new Error('密码不能为空'));
    } else {
        // 如果校验通过,就直接调用callback就行
        callback();
    }
};

const ruleForm = reactive({
    username: 'admin',
    password: '123456',
});

const rules = reactive({
    username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
    password: [{ validator: validatePass, trigger: 'blur' }],
});

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate(valid => {
        if (!valid) {
            return false;
        }
        user.loginApi(ruleForm).then(res => {
            if (res.code === 200) {
                localStorage.setItem('token', res.data.tokenHead + res.data.token);
                // 弹出提示框
                ElMessage.success('登录成功');
                // 跳转首页
                router.push('/index');

                user.userInfoApi().then(res => {
                    if (res.code === 200) {
                        userStore.menus = res.data.menus;
                    }
                });
            }
        });
    });
};

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
};
</script>

<style scoped lang="less">
.Login {
    width: 350px;
    margin: 200px auto;

    h1 {
        font-size: 30px;
    }

    .el-button {
        width: 100%;
    }

    :deep(.el-input_wrapper) {
        background-color: transparent;
    }

    :deep(.el-input_inner) {
        color: white;
    }
}
</style>
